<script setup>
import { ref } from "vue";
import { TinyCard, TinyTag } from "@opentiny/vue";
import {
  IconChevronDown,
  IconChevronUp,
  iconDeltaRightO,
  IconEdit,
  IconUndelete,
} from "@opentiny/vue-icon";
const props = defineProps({
  node: { type: Object, required: true },
  title: { type: String, default: "节点" },
});

const isOpen = ref(true);
const TinyIconChevronDown = IconChevronDown();
const TinyIconChevronUp = IconChevronUp();
const IconDeltaRightO = iconDeltaRightO();
const TinyIconEdit = IconEdit();
const TinyIconUndelete = IconUndelete();
const activeName = ref("2");
const showBottomTools = ref(false);

const handleMouseEnter = () => {
  showBottomTools.value = true;
};

const handleMouseLeave = (event) => {
  // 检查是否移动到编辑按钮上
  const markerElement = document.querySelector(".base-node-marker");
  if (markerElement && markerElement.contains(event.relatedTarget)) {
    return;
  }
  showBottomTools.value = false;
};
const emit = defineEmits(['edit-node', 'delete-node']);

const handleEdit = () => {
  emit('edit-node', props.node);
};

const handleDelete = () => {
  emit('delete-node', props.node);
};
</script>

<template>
  <div
    class="base-node-wrapper"
    @mouseenter="handleMouseEnter"
    @mouseleave="handleMouseLeave"
  >
    <div
      class="base-node-toolbar"
      @mouseenter.stop
      @mouseleave.stop="showBottomTools = false"
    >
      <div v-if="showBottomTools" class="toolbar-item marker" @click="handleEdit">
        <TinyIconEdit />
      </div>
      <div v-if="showBottomTools" class="toolbar-item del" @click="handleDelete">
        <TinyIconUndelete />
      </div>
    </div>

    <tiny-collapse class="demo-collapse-wrap" v-model="activeName" accordion>
      <tiny-collapse-item
        :title="title"
        name="2"
        :expand-icon="IconDeltaRightO"
      >
        <slot name="content" class="content">
          <div>
            控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
          </div>
          <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
        </slot>
      </tiny-collapse-item>
    </tiny-collapse>
  </div>
</template>

<style scoped>
.base-node-wrapper {
  position: relative;
}
.base-node {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.base-node-toolbar {
  position: absolute;
  left: 5px;
  top: calc(100%);
  display: flex;
}

.toolbar-item {
  padding: 5px;
  margin: 5px 5px;
  font-size: 22px;
  height: fit-content;
  font-weight: bold;
  cursor: pointer;
}

.toolbar-item.marker {
  color: #abf785;
  fill: #359903;
  background: radial-gradient(#abf785, transparent 90%);
}
.toolbar-item.del {
  color: #f78585;
  fill: #990d03;
  background: radial-gradient(#f78585, transparent 90%);
}

.tiny-collapse {
  width: 300px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 1px 1px 10px #e7e7e7;
}
</style>